<template>
    <div class="main-body">
      <!--工具栏-->
      <div class="toolbar">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" :placeholder="t('thead.username')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="doSearch">{{ t('action.search') }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="plus" type="primary" @click="doAdd">{{ t('action.add') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--表格内容栏-->
      <cm-table
        ref="tableRef"
        :get-page="listPage"
        :filters="filters"
        :columns="columns"
        :operations="operations"
        @handleEdit="doEdit"
        @handleDelete="handleDelete"
      />
    </div>
  
    <!--新增编辑界面-->
    <el-dialog
      :title="isEdit ? t('action.edit') : t('action.add')"
      v-model="dialogVisible"
      draggable
      width="40%"
      :close-on-click-modal="false"
      @close="doClose"
    >
      <el-form ref="formRef" :model="form" label-width="80px" :rules="rules" label-position="right">
        <el-form-item :label="t('form.username')" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item :label="t('form.group')" prop="roleId">
          <el-select v-model="form.roleId" :placeholder="t('form.choose')" style="width: 100%">
            <el-option v-for="item in roles" :key="item.name" :label="item.label" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="doClose">{{ t("action.cancel") }}</el-button>
        <el-button v-if="isEdit" type="primary" @click="handleSetPsw">{{ t("form.resetPassword") }}</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          :loading="formLoading"
        >{{ t("action.submit") }}</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { listPage, save, update, setPsw, remove } from "@/apis/sys-user";
  import { roles } from '@/mock/data'
  import useTableHandlers from '../use-table-handlers'
  const filters = reactive({
    name: ''
  })
  const form = reactive({
    id: "",
    name: "",
    roleId: "",
  });
  const {
    t,
    tableRef,
    dialogVisible,
    isEdit,
    formLoading,
    formRef,
    doSearch,
    doAdd,
    doEdit,
    doSubmit,
    doRemove,
    doClose
  } = useTableHandlers(form);
  const operations = [
    {
      type: 'edit',
      show: (row) => row.createdBy !== 'system'
    },
    {
      type: 'delete',
      show: row => row.createdBy !== 'system'
    }
  ]
  
  // computed
  const columns = computed(() => [
    { type: 'selection', selectable: isSelectable },
    { prop: "id", label: t("thead.ID"), minWidth: 50 },
    { prop: "name", label: t('thead.username'), minWidth: 120 },
    { prop: "roleName", label: t('thead.group'), minWidth: 120 },
    { prop: "createdBy", label: t('thead.createdBy'), minWidth: 120 },
    { prop: "ip", label: t('thead.latestIp'), minWidth: 100 },
    { prop: "visitTime", label: t('thead.latestVisit'), minWidth: 120 },
  ])
  const rules = computed(() => {
    return {
      name: [
        { required: true, message: t('form.usernameHolder'), trigger: ['blur', 'change'] },
      ],
      roleId: [
        { required: true, message: t('form.roleRequired'), trigger: ['blur', 'change'] },
      ]
    }
  })
  
  // methods
  function isSelectable(row) {
    return row.createdBy !== 'system';
  }
  
  function handleDelete(ids, callback) {
    doRemove(remove, ids, callback)
  }
  function handleSubmit() {
    doSubmit({ save, update }, (res) => {
      if (!isEdit.value) {
        ElMessageBox.alert(
          `${t('tips.success')}${t('form.username')}: ${res.data.name},${t('form.password')}: ${res.data.password}`,
          t('tips.title'),
          {
            confirmButtonText: t('action.confirm'),
          }
        )
      }
    })
  }
  
  function handleSetPsw() {
    setPsw({ ...form }).then(res => {
      ElMessageBox.alert(
        `${t('tips.success')}${t('form.username')}: ${res.data.name},${t('form.password')}: ${res.data.password}`,
        t('tips.title'),
        {
          confirmButtonText: t('action.confirm'),
        }
      )
    })
  }
  </script>
  